<script setup lang="ts">
import {PropType, watch, ref, h, onMounted, onUnmounted} from "vue";
import { speedConvert, mileageConversion } from '@/utils/gps/format'
import { ElTooltip } from "element-plus"
import type { Column } from 'element-plus'

const props = defineProps({
  data: {
    type: Object as PropType<any[]>,
    default: []
  }
})

const model = defineModel<{currentStep: number}>("model", {
  default: {
    currentStep: 0
  }
})
const tableRef = ref()
// 行的配置
const columns: Column<any>[] = [
  {
    key: 'index', width: 60, title: '序号',
    cellRenderer: ({ rowIndex }) => h("span", `${rowIndex + 1}`),
    align: 'center'
  },
  {
    key: "deviceTime", width: 180, title: "更新时间",
    dataKey: "deviceTime",
    align: 'center'
  },
  {
    key: "updateTime", width: 180, title: "设备状态",
    dataKey: "",
    align: 'center'
  },
  {
    key: "direction", width: 100, title: "方向",
    dataKey: "direction",
    align: 'center'
  },
  {
    key: "gotsrc", width: 80, title: "定位类型",
    dataKey: "gotsrc",
    align: 'center'
  },
  {
    key: "updateTime", width: 100, title: "报警",
    dataKey: "",
    align: 'center'
  },
  {
    key: "speed", width: 100, title: "速度",
    dataKey: "speed",
    cellRenderer: ({ cellData })=> h("span", speedConvert(cellData)),
    align: 'center'
  },
  {
    key: "address", width: 400, title: "地址",
    dataKey: "address",
    cellRenderer: ({ cellData })=> h(ElTooltip,{
        effect: "dark",
        content: cellData,
        placement: "top"
      }, ()=> h("span", {
        style: "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
      }, cellData)),
    align: 'center'
  },
  {
    key: "longitude", width: 100, title: "经度",
    dataKey: "longitude",
    align: 'center'
  },
  {
    key: "latitude", width: 100, title: "纬度",
    dataKey: "latitude",
    align: 'center'
  },
  {
    key: "altitude", width: 100, title: "海拔",
    dataKey: "altitude",
    align: 'center'
  },
  {
    key: "totalDistance", width: 100, title: "里程",
    dataKey: "totalDistance",
    cellRenderer: ({ cellData })=> h("span", mileageConversion(cellData)),
    align: 'center'
  }
]

const _height = ref(400)
const _width = ref(700)
let observer

watch(model, (value)=>{
  setCurrentRow(value.currentStep)
})

onMounted(()=>{
  // 通过ResizeObserver 监听表格父级的宽高变化，动态设置表格宽高使得占满父级
  const div = document.querySelector("#track_point")
  observer = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
      // 限制最小宽度，避免造成布局混乱
      _width.value = entry.contentRect.width < 1200? 1200 : entry.contentRect.width
      _height.value = entry.contentRect.height
    })
  })
  observer.observe(div);
})

onUnmounted(()=>{
  const div = document.querySelector("#track_point")
  observer.disconnect(div)
})

/**
 * 滚动到指定行
 * @param index
 */
function setCurrentRow(index: number){
  if(index < 0) return
  tableRef.value.scrollToRow(index, "center")
}

/**
 * 给当前行设置选中样式， 以及给每一行设置悬浮样式
 * @param rowIndex
 */
function rowClass({ rowIndex }){
  if(rowIndex === model.value.currentStep) return "currentRow pointer"
  else return "pointer"
}

/**
 * 行的点击事件
 */
const rowHandler = {
  onClick({ rowIndex }) {
    model.value.currentStep = rowIndex
  },
}

</script>

<template>
<div>
  <el-table-v2
      ref="tableRef"
      :columns="columns"
      :data="props.data"
      :width="_width"
      :height="_height"
      :header-height="30"
      :row-height="35"
      :row-class="rowClass"
      :fixed="true"
      :row-event-handlers="rowHandler"
  />
</div>
</template>

<style scoped lang="scss">
.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep(.currentRow){
  background-color: rgb(204, 205, 206)!important;
}
::v-deep(.pointer){
  cursor: pointer;
}
</style>